Submenu com MVC4
01/09/2013
0
Pjava
Posts
01/09/2013
Pjava
Meu HTML. Existe uma jquery aí e acho que não está bem certa não.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <link href="~/Content/menustyle.css" type="text/css" rel="stylesheet"> <script type="text/javascript"> $(function () { if ($.browser.msie && $.browser.version.substr(0, 1) < 7) { $('li').has('ul').mouseover(function () { $(this).children('ul').css('visibility', 'visible'); }).mouseout(function () { $(this).children('ul').css('visibility', 'hidden'); }) } }); </script> </HEAD> <body xmlns:ec="urn:http://aspnetexpert.com/ExpertControls.xsd"> <form id="Form1" method="post" runat="server"> <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphic design</a></li> <li><a href="#">Development tools</a></li> <li><a href="#">Web design</a></li> </ul> </li> <li><a href="#">Work</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </form> </body> </HTML>{/code] Meu CSS(menustyle.css) [code] #menu, #menu ul { margin: 0; padding: 0; list-style: none; } #menu { width: 960px; margin: 60px auto; border: 1px solid #222; background-color: #111; background-image: linear-gradient(#444, #111); border-radius: 6px; box-shadow: 0 1px 1px #777; } #menu:before, #menu:after { content: ""; display: table; } #menu:after { clear: both; } #menu { zoom:1; } #menu li { float: left; border-right: 1px solid #222; box-shadow: 1px 0 0 #444; position: relative; } #menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *.html #menu li a:hover { /* IE6 only */ color: #fafafa; } #menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 1; background: #444; background: linear-gradient(#444, #111); box-shadow: 0 -1px 0 rgba(255,255,255,.3); border-radius: 3px; transition: all .2s ease-in-out; } #menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #menu ul li:last-child { box-shadow: none; } #menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #menu ul a:hover { background-color: #0186ba; background-image: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { border-radius: 3px 3px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #menu ul li:last-child > a { border-radius: 0 0 3px 3px; }
01/09/2013
Pjava
Estava assim: ~/Content/menustyle.css
e deveria estar assim: ../Content/menustyle.css
Ainda apanho às vezes em saber quando é ~/ e quando é ../. Sei que ambas quer dizer apartir desse folder e etc..., mas às vezes funfa e às vezes não.
Resolvido.
01/09/2013
Joel Rodrigues
~/ vai para a raiz da aplicação e a partir daí você vai "entrando" nas pastas.
../ sobe um nível a partir de onde você estiver. Por exemplo, se o html e o css estão na mesma pasta, não precisa, mas se o css está em uma pasta ESTILOS e e o html dentro de uma pasta HTML, você teria de usar ../ESTILOS/meuarquivo.css.
Obrigado por compartilhar a solução, estou concluindo o tópico.
Favor sinalizar no outro tópico que também foi concluído, pois se trata do mesmo assunto.
Clique aqui para fazer login e interagir na Comunidade :)