Autor Zpráva
Johny52
Profil
Dobrý den,
chtěl bych se vás zeptat jestli by jste mi neporadili s vysouvacím okénkem s odkazy v horizontálním menu.
Je to zkopírované od dvou tvůrců, kteří radí jak se to má dělat a já to chtěl mít smíchané dohromady.
Problem je, v tom, že když najedu myší na odkaz ,,úvod" tak se mi odkazy vysunou horizontálně, ale já bych chtěl vertikálně (směrem dolů). Jeto splácané dohromady, takže se omlouvám, že to moc odborně nevypadá.

Předem děkuji za pomoc:

CSS
.menu, ul {font-size: 90%; margin-top: 3px; margin-bottom: 6px;}
.menu li {color: red; margin: 0px;}
.menu li:hover {color: blue;}

.menu > ul {list-style-type. square; padding-left: 15px;}
.menu ul ul {list-style-type. square; display: none}


#menu-box {background: #1C4E71 url('img/menu-bg.gif') repeat-x 0 0;}
#menu {width: 960px; margin: 0 auto;}

#menu li {
  float: left;
  disvplay: inline;
  list-style-type: none;
  text-align: center;
}

#menu li a {
  text-decoration: none;
  color: #FFF;
  float: left;
  display: inline;
  line-height: 35px;
  padding: 0 18px;
  border-right: 1px solid #6E9DBE;
}

#menu li.first a {border-left: 1px solid #6E9DBE;}
#menu li a:hover, #menu li a.active {background-color: #133F5D;}


.clearfix:after {
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  font-size: 0;
  content: ' ';
}

.clearfix {
  min-height: 1px;
  display: inline-block;}

.clearfix ul {
  margin-top: 0px; 
  position: absolute; 
  visibility: hidden; 
  background-color:  #1C4E71; 
  margin: 0; 
  padding: 0; 
  list-style-type: none;
  }

.clearfix ul a:link {
  color: blue; 
  border-bottom: none; 
  padding-left: 15px;
  }
.clearfix ul a:visited {
  color: green; 
  border-bottom: none; 
  padding-left: 15px; 
  }
.clearfix ul a:hover {
  color: yellow; 
  background-color: rgb(233,233,233);
  }

.clearfix li:hover ul, ul.menu2 li.hover ul { 
  visibility: visible;
  }

.clearfix li li {
  float: none; 
  border: none; 
  padding: 0; 
  margin: 0;

HTML
<div id="zaklad">
    <div id="titul">&nbsp;</div>

<div id="menu-box">    
 <ul id="menu" class="clearfix">
  <li class="first"><a class="active" href="s7nuvod.html">Úvod</a>

------------------zde jsou vysunovací odkazy-------------------------------
            <ul>
                        <li><a href="s7nonas.html">O nás</a></li>
            <li><a href="s7ngalerie.html">Galerie</a></li>
            <li><a href="s7nkontakt.html">Kontakt</a></li>
            </ul>
</li>
 ----------------zde jsou vysunovací odkazy---------------------------------

  <li><a href="s7nonas.html">O nás</a></li>
  <li><a href="s7ngalerie.html">Fotogalerie</a></li>
  <li><a href="s7nkontakt.html">Kontakt</a></li>
  <li><a href="http://miniaplikace.blueboard.cz/pocitadla-statistiky.php?id=414079&kdy=dnes&zalozka=grafy&zobrazeni=ano&hodnoty=ano">Návštěvnost</a></li>
  <li><a href="http://www.tvorba-webu.cz/">Tvorba webu</a></li>
 </ul>



</div>
Johny52
Profil
Tak jsem to vyřešil.
Kdyby někdo chtěl horizontální menu s vysouvací lištou, tady máte HTML a CSS od jednoho, ne, moc chytrého tvůrce, který říká, že mu to funguje a přitom tam nemá ani hidden a ani visitable (nefungovalo). Toto je opravené a na 100% vám to poběží

CSS
body {background-color: #FFF}

nav ul ul {display: none;}

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

.nav ul {
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-block;
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -moz-linear-gardient(top, #efefef 0%, #bbbbbb 100%);
    background: -webkit-linear-gardient(top, #efefef 0%, #bbbbbb 100%);
    box-shadow: black 0px 0px 9px;
    }

.nav ul li {float: left;}

.nav ul li a{
    padding: 5px 10px 5px 10px;
    display: block;
    color: #757575;
    text-decoration: none;
    }

.nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4b545f 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4b545f 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4b545f 0%, #5f6975 40%);
    }

.nav ul li:hover a{color: #fff;}

.nav ul li:hover > ul {maergin: 0px; padding: 0px; visibility: visible;}
.nav ul li:hover > ul li {float: none; display: block; visibility: visible;}
.nav ul li:hover > ul li a {color: #666; min-width: 150px; visibility: visible;}
.nav ul li:hover > ul li a:hover {color: #fff;}

.nav ul li {position: relative;}
.nav ul li ul {position: absolute; top: 30px; left: 0px; visibility: hidden;}



HTML
<html>

<head>
<link href="css.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="nav">

    <ul>
        <li><a href="home.html">HOME</a></li>
        <li><a href="aboutus">ABOUT US</a>

            <ul>
                <li><a href="aboutus.html">ABOUT US</a></li>
                <li><a href="meet.html">MEET THE TEAM</a></li>
                <li><a href="client.html">CLIENT PORTFOLIO</a></li>
                <li><a href="news.html">NEWS</a></li>
            </ul>
        </li>
        <li><a href="solutions.html">SOLUTIONS</a></li>
        <li><a href="contactus.html">CONTACT</a></li>
    </ul>

</div>

</body>

</html

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: