Menu appearing as vertical list

[Anonymous]

Hi Ryan!

I was searching for a drop down menu and I found your plugin. I followed the instructions, making sure that I got them right, several times but the menu appears as a vertical list.

I was testing it on a live site so i took it down. I was using the latest download here.

I am on wp2.5 and copyblogger.

Any idea what went wrong with my install? Thanks.

http://www.reapmoneyonline.com/

[imported_Ryan]

The most likely explanation is that some other CSS on your page was messing the menu up. There isn’t anything I can do without seeing the code though. Perhaps reinstall it, save the page and upload the saved page (including CSS files etc.) elsewhere. Or an setup a WordPress site for me to look at.

[Anonymous]

Hi!

Nice look! Thanks. I still haven’t given up hope on your plugin. I’ll set-up a fresh wordpress install for it. ” title=”Smiley” />

[Anonymous]

I’m having the same problem. My site is live, but I’ve left it with the error since the site isn’t publicly known. I would love to get this feature to work. I’m working with the Structure theme by Justin Tadlock. I admit that I’m not that good with code, but I know I followed the instructions exactly.

You can find my mess at SillySoul.com

Here’s the Style.css file that came with the theme:

[code:1eb4eug6]<textarea name="comments" cols="50" rows="20">
/*
Theme Name: Structure
Theme URI: http://justintadlock.com/archives/2007/12/09/structure-wordpress-theme
Description: A theme for news/magazine sites with a blog-friendly option too.  It includes built-in video and image features that easily allow you to customize your site. There are content blocks that you can place virtually anywhere on the page.
Version: 1.2
Author: Justin Tadlock
Author URI: http://justintadlock.com
Copyright (c) 2007 – 2008 Justin Tadlock
*/

* { margin: 0; padding: 0; }

ul li { list-style-type: none; }

p { margin: 10px 0; }

a { color: #0C386E; text-decoration: none; }
a:hover { color: #000; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #0c386e; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: normal;
text-decoration: none;
color: #0C386E;
}

body {
color: #000;
background: #15191c;
font: 80% "Trebuchet MS", Arial, "Lucida Sans Unicode", Tahoma, sans-serif;
}
#body-container {
overflow: hidden;
width: 948px;
margin: 0 auto;
padding: 0 12px;
background: #01203c;
}
/************************************************
Navigation
************************************************/

#nav-container { overflow: hidden; display: block; background: #01203c; }
#navigation { float: left; width: 635px; margin: 0 10px 0 0; }
#nav { float: left; }
#nav li { float: left; display: inline; }
#nav li a {
font-size: 1em;
font-weight: bold;
float: left;
color: #fff;
text-align: center;
padding: 8px 25px;
text-decoration: none;
}
#nav li a:hover, #nav li a:active { background: #0c386e; text-decoration: underline; }
#navigation ul li.current_page_item a { background: #0c386e; }

/************************************************
Search form (navigation)
************************************************/
#search form { float: right; }
#search input#s {
width: 235px;
padding: 5px;
margin: 2px 0;
color: #333;
background: #f7f7f7;
border: 1px solid #333;
}
#search input#search-submit {
width: 50px;
padding: 4px;
color: #fff;
border: 1px solid #333;
background: #660000;
}
/************************************************
Header
************************************************/
#header {
clear: left;
float: left;
width: 926px;
padding: 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #fff;
}
#header h1 {
display: inline;
float: left;
width: 650px;
font-size: 2.5em;
font-weight: bold;
}
#header h1 a { margin: 0 0 0 5px; }
/************************************************
Feed (header)
************************************************/
#feed {
width: 200px;
float: right;
padding: 2px 50px 0 0;
background: url(images/subscribe.gif) no-repeat right 0;
}
#feed ul li { text-align: right; margin: -1px 0 4px 0; }
#feed ul li a { font-weight: bold; }
#feed ul li a:hover { text-decoration: underline; }

/************************************************
Containers
************************************************/
#container {
overflow: hidden;
float: left;
width: 926px;
padding: 10px 10px 5px 10px;
background: #f7f7f7;
}
#content, #home { width: 611px; }
#content { padding: 0 0 10px 0; }
#content.left, #home.left, #sidebar.left { float: left; }
#content.right, #home.right, #sidebar.right { float: right; }

/************************************************
Images
************************************************/
.post img { max-width: 98%; }
img, a img {
padding: 3px;
border: 1px solid #01203c;
background: #eee;
}
.thumbnail { width: 75px; height: 75px; }
.thumbnail, .medium { float: left; margin-right: 10px; }
html>body #feature img { max-width: 300px; }
#feature img { width: 300px; }
.author-box .avatar { float: left; width: 75px; height: 75px; margin-right: 10px; }
.navigation-attachment img { max-width: 150px; max-height: 150px; }

/************************************************
Posts/pages/archives
************************************************/
#content .post {
width: 594px;
padding: 10px;
overflow: hidden;
float: left;
margin: 0 0 10px 0;
background: #fff;
border: 1px solid #ccc;
}
#content .thumbnail { float: left; margin: 2px 17px 10px 0; }
#content.single .post {
width: 554px;
font-size: 1.1em;
padding: 10px 30px;
}
.post .post-title { margin: 0 0 5px 0; }
.post a { color: #1359AE; text-decoration: none; }
.post a:hover { color: #000; text-decoration: underline; }
.post .post-title a { color: #0C386E; }
.post .byline { margin: 5px 0 7px 0; }
.post-meta-data { margin-right: 6px; text-align: right; }
#content .post-meta-data {
clear: left;
float: left;
width: 100%;
text-align: left;
}

/* Alignment */
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.center { margin: 15px auto; text-align: center; display: block; }

/* Navigation links */
.navigation-links {
width: 594px;
padding: 10px;
overflow: hidden;
float: left;
margin: 0 0 10px 0;
background: #fff;
border: 1px solid #ccc;
}
.previous { float: left; width: 47%; }
.next { float: right; width: 47%; text-align: right; }
.single .next { text-align: left; }

/* Tables */
table { width: 95%; margin: 0 auto; border: 1px solid #eee; }
table tr { font-weight: bold; background: #ccc; }
table tr td { text-align: center; background: #fff; border: 1px solid #ccc; }
table tr td.pad { border: none; }

/************************************************
Feature
************************************************/
/* Feature */
#feature .post {
float: left;
width: 594px;
margin: 0 0 10px 0;
padding: 10px;
background: #fff;
border: 1px solid #ccc;
}
#feature .post-title { margin: 0 0 5px 0; font-size: 1.6em; }
#feature img { float: left; margin: 3px 15px 10px 0; }
#feature p { margin: 0 0 10px 0; }

/************************************************
Excerpts
************************************************/
#excerpts .post {
float: left;
width: 594px;
margin: 0 0 10px 0;
padding: 10px;
background: #fff;
border: 1px solid #ccc;
}
#excerpts .post-title { float: left; width: 100%; margin: 0 0 5px 0; }
#excerpts img { float: left; margin: 2px 17px 10px 0; }

/************************************************
Full posts (home)
************************************************/
#full-posts .post {
float: left;
width: 594px;
margin: 0 0 10px 0;
padding: 10px;
background: #fff;
border: 1px solid #ccc;
}
#full-posts .post-title { float: left; width: 100%; margin: 0 0 5px 0; }
#full-posts .byline { margin: 0 0 15px 0; clear: left; display: block; float: left; width: 100%; }
#full-posts .post-meta-data { float: left; text-align: left; }

/************************************************
Widget blocks (also see sidebar menu)
************************************************/
#widget-blocks { float: left; margin-bottom: 10px; width: 616px; }
#widget-blocks .block-left { float: left; width: 300px; }
#widget-blocks .block-right { float: right; width: 300px; }

/************************************************
Sidebar
************************************************/
#sidebar {
overflow: hidden;
width: 300px;
}
.menu {
overflow: hidden;
float: left;
width: 278px;
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
}
.menu li, .tabbed .tab-content li { padding: 0 5px 0 0; }
#sidebar .menu li a, #widget-blocks .menu li a, .tab-content li a { width: 97%; display: block; padding: 2px 0 2px 10px; }
.menu ul li a:hover, .tabs-block .tabbed div li a:hover { text-decoration: underline; }
#sidebar .tab-content p, #widget-blocks .tab-content p { margin: 5px; }

/************************************************
Video widget
************************************************/
.video { padding: 10px 0; width: 298px; }
.video div { padding: 2px 0; margin: 0; }
.video object { float: left; width: 295px; height: 230px; margin: 5px 0; padding: 0; }
.video h2, .video h3 { margin-left: 10px; }
.video .post-title { font-size: 1em; margin-top: 3px; }

/************************************************
Ads widget
************************************************/
.ads img {
width: 125px; height: 125px;
float: left;
margin: 2px 4px 7px 10px;
padding: 0; border: none;
}

/************************************************
Recent widget
************************************************/
.recent {
width: 288px;
padding: 10px 5px;
margin: 0 0 10px 0;
float: left;
background: #fff;
border: 1px solid #ccc;
}
.recent .post {
width: 99%;
float: left;
margin: 5px;
padding: 0;
line-height: 1em;
}
.recent h2 { margin-left: 5px; }
.recent .post h3 { margin: 0; padding: 0; }
.recent .post h3 a { display: inline; font-size: .7em; font-weight: bold; }
.recent img { display: block; clear: left; float: left; margin: 2px 10px 0 0; }

/************************************************
Tabs
************************************************/
#sidebar .tabs-block, #widget-blocks .tabs-block { width: 300px; }
.tabs-block {
clear: left;
float: left;
margin-bottom: 10px;
}
.tabbed {
width: 100%;
background: transparent;
border: none;
padding: 0;
}
/* Actual tabs */
.tabbed ul.tabs {
position: relative;
top: 0;
left: 0;
z-index: 5;
list-style-type: none;
}
.tabbed ul.tabs li { display: inline; float: left; }
.tabbed ul.tabs li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 5px .4em;
font-weight: bold;
background: #eee;
border: 1px solid #ccc;
}
.tabbed ul.tabs li a:hover { background: #f7f7f7; text-decoration: none; }
.tabbed ul.tabs li a.tab-current { background: #fff; border-bottom: 1px solid #fff; }

/* Tab content */
.tab-content {
float: left;
overflow: hidden;
clear: left;
z-index: 0;
margin-top: -1px;
border: 1px solid #ccc;
background: #fff;
}
#sidebar .tab-content, #widget-blocks .tab-content { width: 99%; padding: 5px 0; }
div.t2, div.t3, div.t4, div.c2, div.c3, div.c4, div.c5, div.c6, div.c7, div.c8 { display: none; }

/* All post tabs */
#post-tabs, #post-list-tabs, #post-block-tabs { width: 616px; }
#post-tabs .tab-content, #post-block-tabs .tab-content, #post-list-tabs .tab-content { width: 594px; padding: 10px; }
#post-tabs .post, #post-block-tabs .post, #post-list-tabs .post { margin: 5px 0 0 0; }
#post-tabs .post-title, #post-block-tabs .post-title, #post-list-tabs .post-title { font-size: 1.15em; }

/* Post block tabs */
#post-block-tabs .odd { clear: both; float: left; width: 48%; }
#post-block-tabs .even { float: right; width: 48%; clear: none; }

/* Post list tabs */
#post-list-tabs .odd { float: left; width: 50%; clear: left; }
#post-list-tabs .even { float: right; width: 45%; clear: none; }
#post-list-tabs .tab-content li { margin: 4px 0; }

/************************************************
Comments template
************************************************/
#comments-template {
overflow: hidden;
float: left;
clear: left;
width: 564px;
padding: 10px 25px;
margin: 0 0 10px 0;
border: 1px solid #ccc;
background: #fff;
}
#comments-template h3 { margin: 10px 0 0 0; }
#comments-template li {
list-style-type: none;
float: left;
width: 97%;
margin: 10px 0;
padding: 5px;
background: #f7f7f7;
border: 1px solid #ccc;
}
#comments-template img { border: none; padding: 0; }
#comments-template .avatar {
float: left;
width: 35px; height: 35px;
margin: 5px 10px 0 10px;
padding: 1px;
border: 1px solid #01203c;
background: #eee;
}
#comments-template li.alt {
border-top: 1px solid #0C386E;
border-bottom: 1px solid #0C386E;
}
#comments-template .comment-meta-data {  float: left; margin-top: 5px; }
#comments-template .comment-text {
clear: left;
float: left;
display: block;
width: 90.5%;
margin: 10px;
padding: 8px 15px;
background: #fff;
border: 1px solid #eee;
}
#comments-template input {
width: 50%;
padding: 5px;
margin:  10px 5px 0 0;
background: #fff;
border: 1px solid #0C386E;
}
#comments-template textarea {
width: 96%;
padding: 5px;
margin-top: 10px;
border: 1px solid #0C386E;
}
#comments-template input.submit-comment, #comments-template input.reset-comment, .button {
width: 100px;
padding: 7px;
margin-right: 10px;
color: #fff;
border: 1px double #333;
background: #0C386E;
}

/************************************************
Footer

************************************************/
#footer {
color: #fff;
clear: both;
width: 945px;
margin: 0 auto;
border-top: 1px solid #660000;
}
#footer p {
float: left;
width: 50%;
margin: 0 auto;
padding: 5px 0;
}
#footer p.icons {
float: right;
text-align: right;
width: 50%;
height: 30px;
}
#footer img { border: none; padding: 0px; }
#footer a { color: #ccc; font-weight: bold; }
#footer a:hover { text-decoration: underline; }
#footer img { margin: 0 10px; border: none; }
</textarea>
[/code:1eb4eug6]

I really hope you can help. If it turns out that the problem is my theme, could you point me towards a good magazine/webzine theme that this feature would work on?

Thank you so much. Take care.

– Vincent
SillySoul.com
Vincent@sillysoul.com

EDIT by Ryan: added CODE tags – makes it easier to read

[Anonymous]

Just so you know, I am using Firefox 3 on Ubuntu 8.04 LTS and Firefox 2.0.0.14 on XP – I get the same vertical menu list under my navigation bar. I noticed that it’s somewhat working when I view my website with IE7. However, I did browse working sites with firefox that I was able to navigate with ease. So, I have no idea what the problem is. Good Luck. If not, maybe I should start over….

– Vincent
SillySoul.com

Vincent@SillySoul.com

[imported_Ryan]

Vincent. The code which GoDaddy is spewing onto your page is messing up the plugin. Try deactivating the style.php file in your admin panel, that may help.

Also, you have some very weird HTML on our page. Tags in the wrong places. Perhaps try validating your pages to correct them. It is very difficult to fix CSS problems with invalid pages.

http://validator.w3.org/check?verbose=1 … oul.com%2F

[Author]

Posts