CODEWITHSUNDEEP
cssmenuhtml-lists
Grant
Grant

Reputation: 196

display ul li side by side

I'm trying to display a drop down part of a menu side by side instead of top to bottom. I have to display: none to make the menu work, and float: left isn't doing it. I'm out of ideas and not sure what else to do needing the display: none to be there to hide the list until it needs to show. I've thrown float: left pretty much everywhere. The CSS:

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    min-width: 200px;
    float: left;
    display: inline;
} 
ul#navigation {
    float: left;
} 
ul#navigation li {
    float: left;
    border: 1px black solid;
    min-width: 200px;
} 
ul.sub_navigation {
    position:absolute;
    float: left;
    display: inline;
    display: none;
} 
ul.sub_navigation li {
    clear: both;
    float: left;
    display: inline;
} 
a,a:active,a:visited {
    display: block;
    padding: 10px;
}

The HTML:

<div id="menu">
    <ul id="navigation">
        <li class="dropdown"><a href="javascript:ajaxpage('home.php', 'body');">Home</a></li>
        <li class="dropdown"><a href="javascript:ajaxpage('projects.php', 'body');">Projects</a>
            <ul class="sub_navigation" style="float: left;">
                    <!-- pull projects with P H P -->
                    <li><a href="javascript:ajaxpage('openproj.php?id=<? echo $row['id']; ?>', 'body');"><? echo $row['name']; ?></a></li>
                    <li><a href="javascript:ajaxpage('createproj.php', 'body');">Add a project</a></li>
                    <?php
                    }
                    ?>
            </ul>
        </li>
        <li class="dropdown"><a href="javascript:ajaxpage('pubfiles.php', 'body');">Public Files</a></li>
        <li class="dropdown"><a href="javascript:ajaxpage('users.php', 'body');">Users</a></li>
        <li class="dropdown"><a href="javascript:ajaxpage('settings.php', 'body');">Settings</a></li>
            <!-- only pull if admin and logged in per P H P session-->
        <li class="dropdown"><a href="javascript:ajaxpage('admin.php', 'body');">Admin</a></li>
    </ul>
</div>

Upvotes: 1

Views: 29617

Answers (2)

Polash
Polash

Reputation: 31

You Can implement your HTML and CSS code this way, then It will work properly.

HTML:

<div class="menu">
    <ul>
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="about.html">Services</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Contact us</a></li>
    </ul>
</div>

CSS:

.menu {
   padding:0;
   margin:0;
   width:400px;
   float:left;
 }

.menu ul {
  padding:0;
  margin:0;
  list-style:none;
  border:0;
  float:left;
}

.menu ul li {
  float:left;
  margin:0;
  padding:0;
  border:0;
}

.menu ul li a {
  float:left;
  margin:0;
  padding:13px 10px;
  text-decoration:none;
  border:1px
  solid #000;
}

Upvotes: 3

Grant
Grant

Reputation: 196

It seemed that putting width=auto; in both the ul li and its child, as well as changing the child positioning to relative, made it work the way I needed it to.

I appreciate everyone's input as it brought me to being one step closer to being done with this and learning a lot more about this site, and css with jquery.

Link: jsFiddle

Upvotes: 3

Related Questions