Drop down menu not showing up correctly. WordPress

• SOLVED

I have a menu that is cutting of the last item in the drop-down no matter how many categories I put in it. I assume it's an issue with the .css file of dropdown theme.

The drop-down menu in question is the one in the middle of the page @ http://liv.tv

The advanced .css for the theme:

@charset "UTF-8";

/**
* Abobe Advanced CSS Drop-Down Menu Theme
*
* @file default.advanced.css
* @name Adobe
* @version 0.1
* @type transitional
* @browsers Windows: IE5+, Opera7+, Firefox1+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2008 Live Web Institute. All Rights Reserved.
*
*/

@import "default.css";


ul.dropdown li a { /* Moved from 'custom' section */
display: block;
padding: 7px 12px;
}


/* ------------- Override default */

ul.dropdown li {
padding: 0;
}


/* ------------- Reinitiate default: post-override activities */

ul.dropdown li.dir {
padding: 7px 20px 7px 12px;
}

ul.dropdown ul li.dir {
padding-right: 15px;
}


/* ------------- Custom */

ul.dropdown li {

}


/* Especially for IE6 or lower */

ul.dropdown ul a {
padding: 4px 5px 4px 12px;
/*width: 139px;*/
}

ul.dropdown ul a:hover {
padding: 3px 5px 3px 11px;
border: solid 1px #ddd;
background-color: #eee;
font-weight: bold;
}

ul.dropdown ul a.dir {
/*width: 129px;*/
}


Or it could be an issue in the other CSS file:


ul.dropdown { font: bold 12px Arial, Helvetica, sans-serif; }
ul.dropdown li { padding: 7px 12px; background-color: #000; color: #fff; }
ul.dropdown li.hover, ul.dropdown li:hover { background-color: #222; }
ul.dropdown a, ul.dropdown a:link, ul.dropdown a:visited { color: #fff; text-decoration: none; }
ul.dropdown a:hover { color: #fff; text-decoration: underline; }
ul.dropdown a:active { color: #fff; }

ul.dropdown ul {
margin-left: -6px;
width: 170px;
padding-bottom: 9px;
background: url(images/dropdown_pane.png) 0 100% no-repeat;
color: #000;
font-size: 11px;
font-weight: normal;
}

* html ul.dropdown ul { background-image:none; background-color:#ccc; }

ul.dropdown ul li {
background-color: transparent;
color: #000;
}

ul.dropdown ul li.hover,
ul.dropdown ul li:hover {
background-color: transparent;
}

ul.dropdown ul li.empty {
padding: 12px 12px 7px !important;
font-weight: bold;
}

ul.dropdown ul a, ul.dropdown ul a:link, ul.dropdown ul a:visited { color: #000; }
ul.dropdown ul a:hover { color: #000; text-decoration: none; }
ul.dropdown ul a:active { color: #000; }

ul.dropdown ul ul { display: none; }

ul.dropdown *.dir {
padding-right: 12px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}


ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}

ul.dropdown-vertical *.dir {
background-image: url(images/nav-arrow-right.png);
}

ul.dropdown-vertical-rtl *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}

.dropdown-horizontal-container{background-color:#000;}


Answers (2)

2012-07-02

Arnav Joy answers:

in style.css add following

.sub-menu li {
padding-bottom: 10px !important;
}

---

liv comments:

worked thanks!

2012-07-02

Pali Madra answers:

In the default.advanced.css on line number 54 edit the code to read

ul.dropdown ul a {
padding: 4px 5px 10px 12px;
}

It should do the trick for you.