Menu rozwijalne w CSS

**thestreet** · 21-08-2013, 18:11

Witam,

Mam problem z menu rozwijalnym w CSS wszystko działa na joomla 2.5.
dokładnie chodzi o to, że po modyfikacjach menu rozjeżdza się. Poniżej kod i screeny

Przed modyfikacja screen nr 1screen1.jpg

Kod:


#hor_nav
{
    background-image: url(../../images/menu/menu_bg.png);
    height: 45px;/*45px*/
    z-index: 1000;/*1000;*/
    position: relative;
    margin-bottom: 10px;/*10px;*/
}
#hor_nav UL
{
    margin: 0;
}
#hor_nav LI
{
    list-style: none;
    float: left;
    padding-left: 0;/*0*/
    height: 34px;/*34px*/
    position: relative;/*relative*/
    text-transform: uppercase;
}
#hor_nav LI A
{
    display: block;
    padding: 0 10px;/*10px !!!!!!!*/
    line-height: 45px;/*45px*/
    color: #FFF;
    font-weight: bolder;
    border-right: 1px solid #D8D8D8;
    font-size: 80%;
}
#hor_nav LI.active A
{
    background: #007EBA;
    color: #FFFFFF;
}
#hor_nav LI A:hover, #hor_nav LI:hover A, #hor_nav LI.sfHover A
{
    background: #007EBA;
    color: #FFF;
    text-decoration: none;
}
#hor_nav LI UL
{
    position: absolute;
    width: 170px;/*170px*/
    left: -999em;/*-999em*/
    margin-left: -60px;/*-4px*/
    border: 0;
    border-top: 0;
}
#hor_nav LI UL UL
{
    margin: -31px 0 0 170px;/*170px*/
}
#hor_nav LI:hover UL UL, #hor_nav LI:hover UL UL UL, #hor_nav LI:hover UL UL UL UL, #hor_nav LI.sfHover UL UL, #hor_nav LI.sfHover UL UL UL, #hor_nav LI.sfHover UL UL UL UL
{
    left: -999em;/*-999em*/
}
#hor_nav LI LI
{
    padding: 0;/*0*/
    height: 34px;/*auto*/
    background: #FFF;
    width: 230px;/*170px !!!!!!*230/
}
#hor_nav LI LI A, #hor_nav LI LI.active A, #hor_nav LI LI A:hover
{
    margin: 0;
    height: 30px;/*30px*/
    line-height: 30px;/*30px*/
    background: #007EBA;
    border-top: 1px solid #FFFFFF;
    color: #4C4C4C;
}
#hor_nav LI LI A, #hor_nav LI.active LI A
{
    font-weight: normal;
}
#hor_nav LI:hover UL, #hor_nav LI.sfHover UL
{
    left: 4px;/*4px*/
}
#hor_nav LI LI:hover UL, #hor_nav LI LI LI:hover UL, #hor_nav LI LI LI LI:hover UL, #hor_nav LI LI.sfHover UL, #hor_nav LI LI LI.sfHover UL, #hor_nav LI LI LI LI.sfHover UL
{
    left: 0;
}

Po modyfikacji belki gł (menu gł) jest problem z pod menu screen nr 2screen2.jpg

Kod:

#hor_nav LI A
{
    display: block;
    padding: 0 60px;/*10px !!!!!!!*/
    line-height: 45px;/*45px*/
    color: #FFF;
    font-weight: bolder;
    border-right: 1px solid #D8D8D8;
    font-size: 80%;

Chodzi o to aby menu wyświetlało się jak na screenie nr 3, czyli równo z menu gł (zaznaczone 1) i aby wartość dopasowała się do tekstu - dotyczy to belki górnej na screenie nr3 zaznaczone 2 i pod menu zaznaczone 3
screen3.jpg
dzięki za pomoc

- - - Updated - - -

HTML

Kod:



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl-pl" lang="pl-pl" dir="ltr">


<head>
  <base href="http://localhost/index.php" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>O nas</title>
  <link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/templates/EN_WWW/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="stylesheet" href="/templates/EN_WWW/css/menu/1.css" type="text/css" />
  <link rel="stylesheet" href="/templates/EN_WWW/css/2.css" type="text/css" />
  <link rel="stylesheet" href="/templates/EN_WWW/css/3_v1.css" type="text/css" />
  <link rel="stylesheet" href="/templates/EN_WWW/css/4.css" type="text/css" />
  <link rel="stylesheet" href="/templates/EN_WWW/css/5.css" type="text/css" />
  <link rel="stylesheet" href="/templates/EN_WWW/css/6.css" type="text/css" />
  <link rel="stylesheet" href="/templates/EN_WWW/css/colors/7.css" type="text/css" />
  <link rel="stylesheet" href="/media/mod_languages/css/8.css" type="text/css" />
  <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/media/system/js/core.js" type="text/javascript"></script>
  <script src="/media/system/js/caption.js" type="text/javascript"></script>
  <script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
  <script src="/templates/EN_WWW/js/jquery.js" type="text/javascript"></script>
  <script src="/templates/EN_WWW/js/jquery-noconflict.js" type="text/javascript"></script>
  <script type="text/javascript">
window.addEvent('load', function() {
				new JCaption('img.caption');
			});
  </script>






<script type="text/javascript" src="/templates/EN_WWW/js/photo.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function() {
setTimeout(function(){
jQuery('#slider').slimSlider({
effect:'fade',
slices:15,
animSpeed:500,
pauseTime:5000,
startSlide:0,
directionNav:false,
controlNav:false});
});     
}); 
</script>






<style type="text/css">
/* custom template width */
/*
.container
{
width:  !important;
max-width:  !important;
}
*/
/* start custom color */
body
{
 font-family:Verdana;
}
</style>




<!-- START CSS -->
<!-- ################ -->
<style type="text/css">
/* BODY FONT SIZE */
body
{


font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 10px;
font-size: 13px}
body.site
{
background-color: #e6cbc1}
/* EXTRA BODY */
body.site
{
background-image: url(/templates/EN_WWW/images/backgrounds/body_bg_default.png) !important;
}
body.site
{
background-image: url(/templates/EN_WWW/images/backgrounds/body_bg_default.png) !important;
}




/* start horizontal navigation */
#hor_nav ul li a
{
color: #FFFFFF}
#hor_nav LI.active A
{<img src="C:/Users/mx/Desktop/at_meridion/template_preview.png" width="180" height="150" border="0" alt="">
background-color:  !important;
}
#hor_nav LI A:hover, #hor_nav LI:hover A, #hor_nav LI.sfHover A
{
background-color:  !important;
}
#hor_nav LI LI A, #hor_nav LI LI.active A, #hor_nav LI LI A:hover
{
background-color:  !important;
}
/* hor nav border color */
#hor_nav LI A
{
border-right: 1px solid #07815a}
#hor_nav LI LI A, #hor_nav LI LI.active A, #hor_nav LI LI A:hover
{
border-top: 1px solid #19A97B !important;
border-right: 1px solid #19A97B !important;
}
</style>
<!-- END CSS -->
<!-- ################ -->


<!-- START IE -->
<!-- ################ -->


<!--[if lt IE 9]>
<script src="/media/jui/js/html5.js"></script>
<![endif]-->


<!-- END IE -->
<!-- ################ -->


<style type="text/css">


#container_inner
{
border-radius: 10px 10px 0 0;
}
.footer .container
{
border-radius: 0 0 10px 10px;
}
.nav-child.unstyled.small
{
border-radius: 0 0 3px 3px;
}
.well
{
border-radius: 0;
}
#hor_nav li, #hor_nav li.active a, #hor_nav a:hover
{
border-radius: 0 0 0 0;
}
#hor_nav .menu ul li
{
border-radius: 0 0 0 0;
}
#page_header_h3
{
border-radius: 2px;
}
.well
{
border-radius: 4px;
}


</style></head>


<body class="site com_content view-featured layout- task- itemid-109  ">
<!-- Body -->
<div class="body">
<div class="container">


<!-- ///////////////// START extra CONTAINER INNER div ////////////////// -->
<!-- //////////////////////////////////////////////////////////////////// -->
<div id="container_inner">


<!-- ///////////////// START HEADER ////////////////// -->
<!-- //////////////////////////////////////////////////// -->
<div class="header">
<div class="header-inner">


<a class="brand pull-left" href="/">
<img src="http://localhost/images/banners/LOGO_szare_male.png" alt="www.www.eu" /> 
</a>
<div class="header-search pull-right">
<div class="mod-languages">


	<ul class="lang-inline">
						<li class="lang-active" dir="ltr">
			<a href="/index.php">
							<img src="/media/mod_languages/images/pl.gif" alt="Polish(PL)" title="Polish(PL)" />						</a>
			</li>
								<li class="" dir="ltr">
			<a href="/index.php/en/">
							<img src="/media/mod_languages/images/en.gif" alt="English (UK)" title="English (UK)" />						</a>
			</li>
				</ul>


</div>


</div>
<div class="clearfix"></div>


</div>
</div>
<!-- ///////////////// END HEADER ////////////////// -->
<!-- //////////////////////////////////////////////////// -->


<!-- ///////////////////// START HOR MENU /////////////////// -->
<!-- //////////////////////////////////////////////////// -->
<div id="hor_nav">
<ul class="menu" id="hor_nav">
<li class="item-117 deeper parent"><a href="/index.php/o-nas-3" >O nas</a><ul><li class="item-119"><a href="/index.php/o-nas-3/profile" >Profile</a></li><li class="item-122"><a href="/index.php/o-nas-3/nasza-misja" >Nasza Misja</a></li><li class="item-124"><a href="/index.php/o-nas-3/wspolpraca" >Współpraca</a></li></ul></li><li class="item-116 deeper parent"><a href="/index.php/uslugi" >Usługi</a><ul><li class="item-147"><a href="/index.php/uslugi/uslugi-korporacyjne" >Usługi Korporacyjne</a></li><li class="item-148"><a href="/index.php/uslugi/ksiegowosc-i-administracja-podatkowa" >Księgowość i Administracja Podatkowa</a></li><li class="item-149"><a href="/index.php/uslugi/miedzynarodowe-planowanie-podatkowe" >Międzynarodowe Planowanie Podatkowe</a></li><li class="item-150"><a href="/index.php/uslugi/wirtualne-biuro" >Wirtualne Biuro</a></li></ul></li><li class="item-151 deeper parent"><a href="/index.php?Itemid=151" >Bułgaria</a><ul><li class="item-152"><a href="/index.php/bulgaria/koszty-dzialalnosci-gospodarczej-w-bulgarii" >Koszty Działalności Gospodarczej w Bułgarii</a></li><li class="item-153"><a href="/index.php/bulgaria/sila-robocza-w-bulgarii" >Siła Robocza w Bułgarii</a></li><li class="item-154"><a href="/index.php/bulgaria/edukacja-w-bulgarii" >Edukacja w Bułgarii</a></li><li class="item-155"><a href="/index.php/bulgaria/czlonek-unii-europejskiej-i-nato" >Członek Unii Europejskiej i NATO</a></li><li class="item-156"><a href="/index.php/bulgaria/duzy-wzrost-gospodarczy" >Duży Wzrost Gospodarczy</a></li><li class="item-157"><a href="/index.php/bulgaria/podatki-w-bulgarii" >Podatki w Bułgarii</a></li><li class="item-158"><a href="/index.php/bulgaria/inwestycje-zagraniczne-w-bulgarii" >Inwestycje Zagraniczne w Bułgarii</a></li><li class="item-159"><a href="/index.php/bulgaria/strategiczne-polozenie" >Strategiczne Położenie</a></li><li class="item-160"><a href="/index.php/bulgaria/polityczna-stabilnosc" >Polityczna Stabilność</a></li><li class="item-161"><a href="/index.php/bulgaria/standart-zycia" >Standart Życia</a></li><li class="item-162"><a href="/index.php/bulgaria/umowy-o-unikaniu-podwojnego-opodatkowania" >Umowy o Unikaniu Podwójnego Opodatkowania</a></li></ul></li><li class="item-163 deeper parent"><a href="/index.php?Itemid=163" >News</a><ul><li class="item-164"><a href="/index.php/news-pl/publikacje" >Publikacje</a></li><li class="item-165"><a href="/index.php/news-pl/kalendarz-podatkowy" >Kalendarz Podatkowy</a></li><li class="item-166"><a href="/index.php/news-pl/links" >Links</a></li></ul></li><li class="item-167"><a href="/index.php/kontakt" >Kontakt</a></li></ul>
</div>
<div class="clearfix"></div>




<div class="row-fluid">


<!-- ///////////////////// START LEFT COLUMN ///////////// -->
<!-- //////////////////////////////////////////////////// -->


<!-- ///////////////////// END LEFT COLUMN ///////////// -->
<!-- //////////////////////////////////////////////////// -->


<!-- ///////////////// START CONTENT ////////////////// -->
<!-- //////////////////////////////////////////////////// -->
<div id="content" class="span12">


<div id="system-message-container">
</div>


<!-- ///////////////// START SLIDESHOW ////////////////// -->
<div id="slideshow-outer">


<div id="slider" class="slimSlider"> 
			<img src="/images/sampledata/parks/about.jpg" alt="" title="" />
							<img src="/images/sampledata/parks/services.jpg" alt="" title="" />
																		</div>


</div>
<!-- ///////////////// END SLIDESHOW ///////////////////// -->




<!-- //////////////// START COMPONENT /////////////////// -->
<div class="blog-featured">








</div>




<!-- //////////////// END COMPONENT /////////////////// -->
</div>
<!-- ///////////////// END CONTENT ////////////////// -->
<!-- //////////////////////////////////////////////////// -->


<!-- ///////////////////// START RIGHT COLUMN ///////////// -->
<!-- //////////////////////////////////////////////////// -->


</div>
<!-- ///////////////////// END RIGHT COLUMN ///////////// -->
<!-- //////////////////////////////////////////////////// -->




<!-- start footer 960px -->
<!-- ///////////////// START BOTTOM MODULES ////////////////// -->
<!-- END BOTTOM MODULES -->
<!-- end footer 960px -->


</div>
<!-- ///////////////// END extra CONTAINER INNER div //////////////////// -->
<!-- //////////////////////////////////////////////////////////////////// -->


</div>
</div>


<!-- ///////////////// START FOOTER ////////////////// -->
<!-- ///////////////////////////////////////////////// -->
<div class="footer">
<div class="container"> 


<!-- start footer 100% -->
<!-- end footer 100% -->


<hr />


<p class="pull-right"><a href="#top" id="back-top"> BACK TO TOP</a></p>
<p>&copy; www.www.eu  - All Rights Reserved </p>
</div> 
</div>
<!-- ///////////////// END FOOTTR////////////////// -->
<!-- ////////////////////////////////////////////// -->








</body>
</html>

**zwiastun** · 21-08-2013, 21:33

Wróć do wersji sprzed modyfikacji.
Na podstawie obrazków i fragmentów kodu raczej nie licz na pomoc - obrazki pozwalają co najwyżej zobaczyć, o co ci chodzi, ale nie zbadać problem.

**thestreet** · 21-08-2013, 22:23

To może jak byś ty zrobił menu o które mi chodzi...

**zwiastun** · 21-08-2013, 22:27

Dział zleceń, jeśli uważasz, że to jest wyjście, i ktoś Ci na pewno (za 100-200 zł) zrobi w 10 minut... korzystając z dostępnych rozszerzeń.
Wstaw link do strony, to masz szansę, ze ktoś się temu przyjrzy.

**thestreet** · 21-08-2013, 23:02

http://taxunion.eu

**AoW** · 22-08-2013, 08:15

Witam,

plik hor_nav.css 43 linijka,

#hor_nav LI UL
zmień margin-left: -4px;

**thestreet** · 22-08-2013, 12:13

Nie wszystko wyrównało...

Załącznik 6920

**AoW** · 22-08-2013, 12:14

Załącznik mi nie działa, a na stronie widzę wciąż -60px

**thestreet** · 22-08-2013, 12:51

Screen jest z localhosta.... wrzucone na stronę

Załącznik 6922

**AoW** · 22-08-2013, 12:54

załacznika dalej nie moge zobaczyc, mam komunikat "Błąd Załącznik . Jeżeli użyłeś(aś) prawidłowego linku, proszę poinformować o tym problemie administratora"

co do wyrownania, to na FF, Chrome i IE wyświetla mi menu poprawnie.

Temat: Menu rozwijalne w CSS

Przybornik

Widok

Menu rozwijalne w CSS

Podobne tematy

Rozwijalne menu

Menu rozwijalne, a różne rodzaje menu mainmenu, topmenu

Menu rozwijalne

Rozwijalne menu

Rozwijalne menu

Reguły pisania