I am using Spry's horizontal menu and wish to do the following:
I want the text in the menu bar to be indented by about a quarter of an inch, but I want the gap between the menu bar items to remain the same.
When a menu bar item item is highlighted I want there to be a gap at the top and bottom between the highlight color and the top and bottom edges of the menu bar.
You can see the website here: http://staging-area-2.com/
Have a look at the following
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHor izontal.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
html {
color: #333;
font-family: Cantrell, Arial, Verdana, "Lucida Bright", Helvetica, Sans-serif;/* Cantrell is a Google web font */
background-color: #999;
font-size: 0.8em;
}
body {
width: 920px;
margin: 36px auto 20px;
overflow: hidden;
}
#header {
height: 206px;
background: url(http://staging-area-2.com/images/Header.png) no-repeat left top;
}
#nav {
height: 53px;
padding: 12px 0;
background: url(http://staging-area-2.com/images/BeigeMenuBar.png) no-repeat;
}
ul.MenuBarHorizontal li {
width: auto;
}
ul.MenuBarHorizontal ul {
width: auto;
}
ul.MenuBarHorizontal ul li {
display: block;
float: none !important;
width: auto;
white-space: nowrap;
border-bottom: solid 1px #EEE;
}
ul.MenuBarHorizontal a {
background-color: #DCC7AE;
padding: 0.5em 2.3em;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
background-color: #DCC7AE;
color: #000;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
background-color: #F7EFE5;
color: #333;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
padding: 0.5em 2em 0.5em 0.75em;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="/index.html">Home</a> </li>
<li><a href="/CraigClark.html">About Craig D. Clark, MD</a></li>
<li><a href="/HealthLibrary.html">Health library</a></li>
<li><a href="/Location.html">Location</a></li>
<li><a href="/Hours.html">Hours</a></li>
<li><a href="/Specialties.html">Specialties</a></li>
<li><a href="/FormsPayments.html">Forms & payment</a></li>
</ul>
</div>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps
North America
Europe, Middle East and Africa
Asia Pacific