1 reply [Last post]
LocalFootyStats
Offline
newbie
Melbourne
Last seen: 2 years 37 weeks ago
Melbourne
Timezone: GMT+11
Joined: 2017-03-16
Posts: 2
Points: 3

Hi My site is http://marc.byethost9.com/ Im getting lost on how to add a multi drop down menu. Ages ago I download a css style web page that included a the folders header, footer, includes, variables and images as well as the index page, contact page, about page. It also has the style.css in it. Am I meant to change the code to do drop down menus in the nav part or in the css part. Am i meant to remove old colde in css to allow the drop down menu.

I hope this isnt to confusing. I tried changing coding but the page links were all out of wack.

Thanks
Marc

LocalFootyStats
Offline
newbie
Melbourne
Last seen: 2 years 37 weeks ago
Melbourne
Timezone: GMT+11
Joined: 2017-03-16
Posts: 2
Points: 3

I think I worked out how to

I think I worked out how to do it but can anyone tell me why the box is so big when I hover over a menu?

This is my Nav code

<div id="nav">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
</div> <!-- end #nav -->

and this is my css

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:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

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

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

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

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

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

#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
}