Multiple drop down menu

[LocalFootyStats]

Hi, I’m trying to change the height of my drop down menu box when u hover over it.
my site is http://marc.byethost9.com/
Is there a way to make the navigation boxes not so high?

Thanks
Marc

body {
background-image: url(images/background.jpg);
font-family: georgia,sans-serif;
color:#333;
margin:0;
padding:0;
}

#wrapper {
width:960px;
background-color:#f8f8f8;
margin:0 auto;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}

#header {
width:960px;
height:90px;
margin:0 auto;
margin-bottom:25px;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
}

#header h2 {
padding:10px;
}

#nav {
width:960px;
height:40px;
border-bottom:1px solid #ccc;
}

#nav a {
display:inline;
padding:10px;
text-decoration:none;
background-color:#f1f1f1;
color: #060;
}

#nav a:hover {
background-color:#bababa;
height:80px;
color: #C00;
}

#content {
width:675px;
float:left;
padding:10px;
}

#sidebar {
width:200px;
float:right;
margin-bottom:25px;
}

#sidebar a {
text-decoration:none;
}

#sidebar li {
list-style:none;
}

#footer {
clear:both;
width:960px;
height:50px;
border-top:1px solid #ccc;
}

#footer p {
padding:10px;
}

#nav
{
margin-top:15px
}

#nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}

#nav ul a
{
display:block;
color:#060;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family: georgia,sans-serif;
}

#nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}

#nav ul li.current-menu-item
{
background:#f1f1f1
}

#nav ul li:hover
{
background:#bababa
}

#nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}

#nav ul ul li
{
float:none;
width:120px
}

#nav ul ul a
{
line-height:120%;
padding:10px 15px
}

#nav ul ul ul
{
top:0;
left:100%
}

#nav ul li:hover > ul
{
display:block
}

[Beverleyh]

I can’t see your site as its being blocked by filters at work, but you should be able to riddle this out in the developer consoler – F12 in most browsers.

Use the styles pane to inspect the menu elements – you can modify the CSS live in the browser.

Once you’ve got everything how you like it, transfer those style modifications to your stylesheet.

[Author]

Posts